<template>
  <view>
    <!-- <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg.png'"> -->
    <u-sticky>
      <view class="m-head1">
        <image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
        <u-navbar leftText="欠费补缴" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
                  :bgColor="bgColor">
        </u-navbar>
        <view class="wp">
          <view class="ul-tabd1" v-if="false">
            <view class="li" v-for="(item, index) in tabList" :key="index"
                  :class="actNum == index ? 'on' : ''" @click="actNum = index">{{ item.tit }}
            </view>
          </view>
        </view>
        <!-- <view class="m-order1">
            <picker @change="bindPickerChange" :value="index" :range="array">
              <view class="uni-input num2">{{array[index]}}</view>
            </picker>
            <view class="num">点击筛选车牌</view>
            <image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
          </view> -->
        <view class="m-order1" v-if="false">
          <view class="inner">
            <view class="current-plate" @click="showPopup = true">
              <view class="num num2">{{ selectedPlate }}</view>
              <image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
            </view>
            <!-- 自定义弹窗 -->
            <view class="custom-popup" v-if="showPopup">
              <!-- 遮罩层 -->
              <view class="popup-mask popup-mask2" @click="showPopup = false"></view>
              <view class="popup-mask" @click="showPopup = false"></view>
              <!-- 弹窗内容 -->
              <view class="popup-content">
                <view class="plate-section">
                  <picker-view class="plate-picker" :value="pickerValue" @change="onPickerChange"
                               indicator-style="height: 80rpx;">
                    <picker-view-column>
                      <view class="plate-item" v-for="(plate, index) in plateList" :key="index"
                            :class="{ active: pickerValue[0] === index }">
                        {{ plate }}
                      </view>
                    </picker-view-column>
                  </picker-view>
                </view>
                <view class="confirm-btn" @click="handleConfirm">
                  确定
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </u-sticky>
    <view class="row-order">
      <view class="wp">
        <view v-if="actNum == 0">
          <checklist :list="list">
          </checklist>
        </view>
        <view v-if="actNum == 1">
          <checklist>
          </checklist>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {post} from "../../api/myHttps";
import mList from '@/components/m-list.vue';
import checklist from '@/components/checklist.vue';

export default {
  components: {
    mList,
    checklist
  },
  data() {
    return {
      showPopup: false,
      selectedPlate: '',
      pickerValue: [0], // 默认选中第一个
      plateList: [
        '鄂E·E12345',
        '鄂E·E12346',
        '鄂E·E12347',
        '鄂E·E12348',
        '鄂E·E12349'
      ],

      // 头部背景色
      bgColor: 'transparent',
      actNum: 0,

      tabList: [{
        tit: '路内停车点'
      },
        {
          tit: '封闭停车场'
        },
      ],
      actNumch: 0,
      list1: [{
        name: '全部',
      }, {
        name: '免费离开',
      }, {
        name: '付费离开'
      }, {
        name: '欠费离开'
      },],
      array: ['鄂 · EE12345', '鄂 · EE12346', '鄂 · EE12347',],
      index: 0,
      list: [],
      type: '',
    }
  },
  onLoad(options) {
    this.selectedPlate = options.plate;
    this.type = options.type;
    this.getList(options.plate, options.ownerId);
  },
  // mounted() {
  // 	// 初始化选中第一个车牌
  // 	this.selectedPlate = this.plateList[0]
  // },
  methods: {
    getList(plate, ownerId) {
      console.log('getList', plate, ownerId, this.type);
      post('/city-pay/eulb/arrearMiniList?ownerId=' + ownerId + '&plate=' + plate, '').then((res) => {
        if (this.type !== 'mini') {
          res = res.filter(item => item.state !== 1); // todo
        }
        res.forEach(item => {
          let result = this.getTimeDiff(item.inTime, item.doTime);
          item.checked = false; // 添加新字段并赋值
          item.hours = result.hours;
          item.minutes = result.minutes;
          console.log('state', item.state);
        });
        console.log(res);
        this.list = res;
      })
    },
    getTimeDiff(startTime, endTime) {
      // 首先处理iOS不支持的日期格式问题
      const fixTime = (timeStr) => {
        if (!timeStr) return NaN; // 如果输入为空，则返回NaN
        return new Date(timeStr.replace(' ', 'T')); // 将空格替换为'T'，使其符合ISO 8601标准
      };

      const start = fixTime(startTime);
      const end = fixTime(endTime);
      // 检查日期是否有效
      if (isNaN(start) || isNaN(end)) {
        console.error('Invalid date format');
        return {
          hours: 0,
          minutes: 0
        };
      }

      // 确保结束时间晚于开始时间
      if (end < start) {
        console.warn('End time is before start time');
        return {
          hours: 0,
          minutes: 0
        };
      }
      const diffMs = end - start; // 得到毫秒数差异
      const totalMinutes = Math.floor(diffMs / 60000); // 转换为分钟
      const hours = Math.floor(totalMinutes / 60); // 计算小时数
      const minutes = totalMinutes % 60; // 剩余分钟数
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0')
      };
    }
  },
  // picker值变化
  onPickerChange(e) {
    this.pickerValue = e.detail.value
  },

  // 确认选择
  handleConfirm() {
    const selectedIndex = this.pickerValue[0]
    this.selectedPlate = this.plateList[selectedIndex]
    this.showPopup = false

    // 这里可以添加筛选逻辑
    // uni.showToast({
    // 	title: `已选择：${this.selectedPlate}`,
    // 	icon: 'success'
    // })
  },
  handleCityConfirm(e) {
    this.selectedCity = e.value[0].label
    this.showPicker = false
  },
  // 头部滚动
  onPageScroll(res) {
    if (res.scrollTop >= 60) {
      this.bgColor = 'transparent'
    } else {
      this.bgColor = 'transparent'
    }
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.index = e.detail.value
  },
}
</script>

<style>
page {
  background-color: #F4FAF7;
}


.m-pop {
  position: relative;
}
</style>
